/*
  SASS variables are information about icon's compiled state, stored under its original file name

  .icon-home
    width: $icon-home-width

  The large array-like variables contain all information about a single icon
  $icon-home: x y offset_x offset_y width height total_width total_height image_path

  At the bottom of this section, we provide information about the spritesheet itself
  $spritesheet: width height image $spritesheet-sprites
  */
$alert-name: 'alert'
$alert-x: 0px
$alert-y: 34px
$alert-offset-x: 0px
$alert-offset-y: -34px
$alert-width: 25px
$alert-height: 25px
$alert-total-width: 362px
$alert-total-height: 89px
$alert-image: '../images/icons.png'
$alert: (0px, 34px, 0px, -34px, 25px, 25px, 362px, 89px, '../images/icons.png', 'alert', )
$checkbox-check-name: 'checkbox-check'
$checkbox-check-x: 32px
$checkbox-check-y: 73px
$checkbox-check-offset-x: -32px
$checkbox-check-offset-y: -73px
$checkbox-check-width: 16px
$checkbox-check-height: 16px
$checkbox-check-total-width: 362px
$checkbox-check-total-height: 89px
$checkbox-check-image: '../images/icons.png'
$checkbox-check: (32px, 73px, -32px, -73px, 16px, 16px, 362px, 89px, '../images/icons.png', 'checkbox-check', )
$checkbox-default-name: 'checkbox-default'
$checkbox-default-x: 91px
$checkbox-default-y: 0px
$checkbox-default-offset-x: -91px
$checkbox-default-offset-y: 0px
$checkbox-default-width: 16px
$checkbox-default-height: 16px
$checkbox-default-total-width: 362px
$checkbox-default-total-height: 89px
$checkbox-default-image: '../images/icons.png'
$checkbox-default: (91px, 0px, -91px, 0px, 16px, 16px, 362px, 89px, '../images/icons.png', 'checkbox-default', )
$checkbox-disabeld-name: 'checkbox-disabeld'
$checkbox-disabeld-x: 0px
$checkbox-disabeld-y: 73px
$checkbox-disabeld-offset-x: 0px
$checkbox-disabeld-offset-y: -73px
$checkbox-disabeld-width: 16px
$checkbox-disabeld-height: 16px
$checkbox-disabeld-total-width: 362px
$checkbox-disabeld-total-height: 89px
$checkbox-disabeld-image: '../images/icons.png'
$checkbox-disabeld: (0px, 73px, 0px, -73px, 16px, 16px, 362px, 89px, '../images/icons.png', 'checkbox-disabeld', )
$checkbox-hover-name: 'checkbox-hover'
$checkbox-hover-x: 48px
$checkbox-hover-y: 73px
$checkbox-hover-offset-x: -48px
$checkbox-hover-offset-y: -73px
$checkbox-hover-width: 16px
$checkbox-hover-height: 16px
$checkbox-hover-total-width: 362px
$checkbox-hover-total-height: 89px
$checkbox-hover-image: '../images/icons.png'
$checkbox-hover: (48px, 73px, -48px, -73px, 16px, 16px, 362px, 89px, '../images/icons.png', 'checkbox-hover', )
$close-name: 'close'
$close-x: 68px
$close-y: 0px
$close-offset-x: -68px
$close-offset-y: 0px
$close-width: 23px
$close-height: 23px
$close-total-width: 362px
$close-total-height: 89px
$close-image: '../images/icons.png'
$close: (68px, 0px, -68px, 0px, 23px, 23px, 362px, 89px, '../images/icons.png', 'close', )
$del-name: 'del'
$del-x: 25px
$del-y: 34px
$del-offset-x: -25px
$del-offset-y: -34px
$del-width: 23px
$del-height: 23px
$del-total-width: 362px
$del-total-height: 89px
$del-image: '../images/icons.png'
$del: (25px, 34px, -25px, -34px, 23px, 23px, 362px, 89px, '../images/icons.png', 'del', )
$drop-down-name: 'drop-down'
$drop-down-x: 120px
$drop-down-y: 28px
$drop-down-offset-x: -120px
$drop-down-offset-y: -28px
$drop-down-width: 13px
$drop-down-height: 16px
$drop-down-total-width: 362px
$drop-down-total-height: 89px
$drop-down-image: '../images/icons.png'
$drop-down: (120px, 28px, -120px, -28px, 13px, 16px, 362px, 89px, '../images/icons.png', 'drop-down', )
$drop-name: 'drop'
$drop-x: 107px
$drop-y: 28px
$drop-offset-x: -107px
$drop-offset-y: -28px
$drop-width: 13px
$drop-height: 16px
$drop-total-width: 362px
$drop-total-height: 89px
$drop-image: '../images/icons.png'
$drop: (107px, 28px, -107px, -28px, 13px, 16px, 362px, 89px, '../images/icons.png', 'drop', )
$edit-down-name: 'edit-down'
$edit-down-x: 68px
$edit-down-y: 23px
$edit-down-offset-x: -68px
$edit-down-offset-y: -23px
$edit-down-width: 18px
$edit-down-height: 18px
$edit-down-total-width: 362px
$edit-down-total-height: 89px
$edit-down-image: '../images/icons.png'
$edit-down: (68px, 23px, -68px, -23px, 18px, 18px, 362px, 89px, '../images/icons.png', 'edit-down', )
$edit-name: 'edit'
$edit-x: 68px
$edit-y: 41px
$edit-offset-x: -68px
$edit-offset-y: -41px
$edit-width: 18px
$edit-height: 18px
$edit-total-width: 362px
$edit-total-height: 89px
$edit-image: '../images/icons.png'
$edit: (68px, 41px, -68px, -41px, 18px, 18px, 362px, 89px, '../images/icons.png', 'edit', )
$img-name: 'img'
$img-x: 64px
$img-y: 73px
$img-offset-x: -64px
$img-offset-y: -73px
$img-width: 16px
$img-height: 16px
$img-total-width: 362px
$img-total-height: 89px
$img-image: '../images/icons.png'
$img: (64px, 73px, -64px, -73px, 16px, 16px, 362px, 89px, '../images/icons.png', 'img', )
$line-name: 'line'
$line-x: 107px
$line-y: 0px
$line-offset-x: -107px
$line-offset-y: 0px
$line-width: 255px
$line-height: 1px
$line-total-width: 362px
$line-total-height: 89px
$line-image: '../images/icons.png'
$line: (107px, 0px, -107px, 0px, 255px, 1px, 362px, 89px, '../images/icons.png', 'line', )
$look-down-name: 'look-down'
$look-down-x: 127px
$look-down-y: 1px
$look-down-offset-x: -127px
$look-down-offset-y: -1px
$look-down-width: 20px
$look-down-height: 12px
$look-down-total-width: 362px
$look-down-total-height: 89px
$look-down-image: '../images/icons.png'
$look-down: (127px, 1px, -127px, -1px, 20px, 12px, 362px, 89px, '../images/icons.png', 'look-down', )
$look-name: 'look'
$look-x: 107px
$look-y: 1px
$look-offset-x: -107px
$look-offset-y: -1px
$look-width: 20px
$look-height: 12px
$look-total-width: 362px
$look-total-height: 89px
$look-image: '../images/icons.png'
$look: (107px, 1px, -107px, -1px, 20px, 12px, 362px, 89px, '../images/icons.png', 'look', )
$msg-down-name: 'msg-down'
$msg-down-x: 160px
$msg-down-y: 1px
$msg-down-offset-x: -160px
$msg-down-offset-y: -1px
$msg-down-width: 13px
$msg-down-height: 11px
$msg-down-total-width: 362px
$msg-down-total-height: 89px
$msg-down-image: '../images/icons.png'
$msg-down: (160px, 1px, -160px, -1px, 13px, 11px, 362px, 89px, '../images/icons.png', 'msg-down', )
$msg-name: 'msg'
$msg-x: 147px
$msg-y: 1px
$msg-offset-x: -147px
$msg-offset-y: -1px
$msg-width: 13px
$msg-height: 11px
$msg-total-width: 362px
$msg-total-height: 89px
$msg-image: '../images/icons.png'
$msg: (147px, 1px, -147px, -1px, 13px, 11px, 362px, 89px, '../images/icons.png', 'msg', )
$news-name: 'news'
$news-x: 31px
$news-y: 0px
$news-offset-x: -31px
$news-offset-y: 0px
$news-width: 37px
$news-height: 20px
$news-total-width: 362px
$news-total-height: 89px
$news-image: '../images/icons.png'
$news: (31px, 0px, -31px, 0px, 37px, 20px, 362px, 89px, '../images/icons.png', 'news', )
$radio-check-name: 'radio-check'
$radio-check-x: 91px
$radio-check-y: 16px
$radio-check-offset-x: -91px
$radio-check-offset-y: -16px
$radio-check-width: 16px
$radio-check-height: 16px
$radio-check-total-width: 362px
$radio-check-total-height: 89px
$radio-check-image: '../images/icons.png'
$radio-check: (91px, 16px, -91px, -16px, 16px, 16px, 362px, 89px, '../images/icons.png', 'radio-check', )
$radio-default-name: 'radio-default'
$radio-default-x: 91px
$radio-default-y: 32px
$radio-default-offset-x: -91px
$radio-default-offset-y: -32px
$radio-default-width: 16px
$radio-default-height: 16px
$radio-default-total-width: 362px
$radio-default-total-height: 89px
$radio-default-image: '../images/icons.png'
$radio-default: (91px, 32px, -91px, -32px, 16px, 16px, 362px, 89px, '../images/icons.png', 'radio-default', )
$radio-disabled-name: 'radio-disabled'
$radio-disabled-x: 91px
$radio-disabled-y: 48px
$radio-disabled-offset-x: -91px
$radio-disabled-offset-y: -48px
$radio-disabled-width: 16px
$radio-disabled-height: 16px
$radio-disabled-total-width: 362px
$radio-disabled-total-height: 89px
$radio-disabled-image: '../images/icons.png'
$radio-disabled: (91px, 48px, -91px, -48px, 16px, 16px, 362px, 89px, '../images/icons.png', 'radio-disabled', )
$radio-hover-name: 'radio-hover'
$radio-hover-x: 16px
$radio-hover-y: 73px
$radio-hover-offset-x: -16px
$radio-hover-offset-y: -73px
$radio-hover-width: 16px
$radio-hover-height: 16px
$radio-hover-total-width: 362px
$radio-hover-total-height: 89px
$radio-hover-image: '../images/icons.png'
$radio-hover: (16px, 73px, -16px, -73px, 16px, 16px, 362px, 89px, '../images/icons.png', 'radio-hover', )
$return-down-name: 'return-down'
$return-down-x: 0px
$return-down-y: 59px
$return-down-offset-x: 0px
$return-down-offset-y: -59px
$return-down-width: 19px
$return-down-height: 14px
$return-down-total-width: 362px
$return-down-total-height: 89px
$return-down-image: '../images/icons.png'
$return-down: (0px, 59px, 0px, -59px, 19px, 14px, 362px, 89px, '../images/icons.png', 'return-down', )
$return-name: 'return'
$return-x: 31px
$return-y: 20px
$return-offset-x: -31px
$return-offset-y: -20px
$return-width: 19px
$return-height: 14px
$return-total-width: 362px
$return-total-height: 89px
$return-image: '../images/icons.png'
$return: (31px, 20px, -31px, -20px, 19px, 14px, 362px, 89px, '../images/icons.png', 'return', )
$star-two-name: 'star-two'
$star-two-x: 107px
$star-two-y: 13px
$star-two-offset-x: -107px
$star-two-offset-y: -13px
$star-two-width: 15px
$star-two-height: 15px
$star-two-total-width: 362px
$star-two-total-height: 89px
$star-two-image: '../images/icons.png'
$star-two: (107px, 13px, -107px, -13px, 15px, 15px, 362px, 89px, '../images/icons.png', 'star-two', )
$star-name: 'star'
$star-x: 122px
$star-y: 13px
$star-offset-x: -122px
$star-offset-y: -13px
$star-width: 15px
$star-height: 15px
$star-total-width: 362px
$star-total-height: 89px
$star-image: '../images/icons.png'
$star: (122px, 13px, -122px, -13px, 15px, 15px, 362px, 89px, '../images/icons.png', 'star', )
$talk-name: 'talk'
$talk-x: 48px
$talk-y: 34px
$talk-offset-x: -48px
$talk-offset-y: -34px
$talk-width: 18px
$talk-height: 17px
$talk-total-width: 362px
$talk-total-height: 89px
$talk-image: '../images/icons.png'
$talk: (48px, 34px, -48px, -34px, 18px, 17px, 362px, 89px, '../images/icons.png', 'talk', )
$user-state-bg-name: 'user-state-bg'
$user-state-bg-x: 0px
$user-state-bg-y: 0px
$user-state-bg-offset-x: 0px
$user-state-bg-offset-y: 0px
$user-state-bg-width: 31px
$user-state-bg-height: 34px
$user-state-bg-total-width: 362px
$user-state-bg-total-height: 89px
$user-state-bg-image: '../images/icons.png'
$user-state-bg: (0px, 0px, 0px, 0px, 31px, 34px, 362px, 89px, '../images/icons.png', 'user-state-bg', )
$spritesheet-width: 362px
$spritesheet-height: 89px
$spritesheet-image: '../images/icons.png'
$spritesheet-sprites: ($alert, $checkbox-check, $checkbox-default, $checkbox-disabeld, $checkbox-hover, $close, $del, $drop-down, $drop, $edit-down, $edit, $img, $line, $look-down, $look, $msg-down, $msg, $news, $radio-check, $radio-default, $radio-disabled, $radio-hover, $return-down, $return, $star-two, $star, $talk, $user-state-bg, )
$spritesheet: (362px, 89px, '../images/icons.png', $spritesheet-sprites, )

/*
  The provided mixins are intended to be used with the array-like variables

  .icon-home
    @include sprite-width($icon-home)

  .icon-email
    @include sprite($icon-email)
  */
@mixin sprite-width($sprite)
  width: nth($sprite, 5)

@mixin sprite-height($sprite)
  height: nth($sprite, 6)

@mixin sprite-position($sprite)
  $sprite-offset-x: nth($sprite, 3)
  $sprite-offset-y: nth($sprite, 4)
  background-position: $sprite-offset-x  $sprite-offset-y

@mixin sprite-image($sprite)
  $sprite-image: nth($sprite, 9)
  background-image: url(#{$sprite-image})

@mixin sprite($sprite)
  @include sprite-image($sprite)
  @include sprite-position($sprite)
  @include sprite-width($sprite)
  @include sprite-height($sprite)

/*
  The `sprites` mixin generates identical output to the CSS template
    but can be overridden inside of SASS

  @include sprites($spritesheet-sprites)
  */
@mixin sprites($sprites)
  @each $sprite in $sprites
    $sprite-name: nth($sprite, 10)
    .#{$sprite-name}
      @include sprite($sprite)
